<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串模板</title>
</head>
<body>
    <div id="todos">

    </div>
    <script>
        const todos = [
            {
                id: 1,
                text: '学习es6'
            },
            {
                id: 2,
                text: '通读你不知道的JavaScript'
            }
        ];
        // dom 编程
        const todosEl = document.getElementById('todos');
        // js 除了简单数据类型， 都是对象
        console.log(todosEl,Object.prototype.toString.call(todosEl))
        // template string 支持换行， 在DOM html 表达中游刃有余
        todosEl.innerHTML = `
        <ul>
           ${
            // 占位符
            // js 运行区域
            // map 迭代数组的每一项， 返回值 并返回一个新地址
            todos.map(todo => `
               <li>${todo.text}</li>
            ` ).join("")
           }
        </ul>   
        `
    </script>
</body>
</html>